<template>
  <div class="index_yingyuan">
    <van-dropdown-menu>
      <van-dropdown-item title="全城" ref="city">
        <van-tabs v-model="active">
          <van-tab title="商区">
            <van-tree-select
              :active-id.sync="subItemsId"
              :main-active-index.sync="subItemsIndex"
              :items="items"
              @click-nav="onNavClick(subItemsIndex)"
            >
              <template #content>
                <div class="subItems" v-for="(ele,index) in subItems" :key="index">
                  <div
                    class="item"
                    :class="{itemActive:ItemIndex==index}"
                    @click="onItemClick(index,ele.id)"
                  >
                    <span class="item-name">{{ele.name}}</span>
                    <span class="item-count">{{ele.count}}</span>
                  </div>
                </div>
              </template>
            </van-tree-select>
          </van-tab>
        </van-tabs>
      </van-dropdown-item>
      <van-dropdown-item :title="title" ref="item">
        <div
          class="brand"
          :class="{active:activeIndex==index}"
          v-for="(ele,index) in CinemasData"
          :key="index"
          @click="onConfirm(ele,index)"
        >
          <span class="name">{{ele.name}}</span>
          <span class="count">{{ele.count}}</span>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div
        class="cinema-item"
        v-for="(item,index) in CinemasList "
        :key="index"
        @click="GoCinemas(item.cinemaId)"
      >
        <div>
          <span class="title">{{item.title}}</span>
          <span class="price">
            <span class="n">{{item.price.n}}</span>
            <span class="q">{{item.price.q}}</span>
          </span>
        </div>
        <div class="location">{{item.location}}</div>
        <div class="services">
          <p :class="ele.code" v-for="(ele,i) in item.services" :key="i">{{ele.text}}</p>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  name: "index_yingyuan",
  data() {
    return {
      subItemsId: 1,
      subItemsIndex: 0,
      district: [],
      items: [],
      subItems: [],
      ItemIndex: 0,
      active: 0,
      CityId: 1,
      value: 0,
      activeIndex: 0,
      title: "品牌",
      CinemasData: [],
      loading: false,
      finished: false,
      offset: 0,
      limit: 10,
      id: -1,
      CinemasList: []
    };
  },
  created() {
    if (localStorage.getItem("historyCity")) {
      this.CityId = JSON.parse(localStorage.getItem("historyCity")).cityid;
    }

    this.GetCinemas();
    // this.GetMoreCinemas();
  },
  methods: {
    onConfirm(ele, index) {
      this.$refs.item.toggle(false);
      this.activeIndex = index;
      this.CinemasList = [];
      this.GetMoreCinemas(ele.id);
      this.id = ele.id;
      this.title = ele.name;
      this.limit = 10;
    },
    GetCinemas() {
      this.axios({
        method: "get",
        url: "index/filterCinemas",
        params: {
          ci: this.CityId
        }
      }).then(ref => {
        let brand = ref.data.brand;
        this.CinemasData = brand.subItems;
        this.district = ref.data.district.subItems;
        this.district.forEach(e => {
          this.items.push({
            text: e.name + `(${e.count})`
          });
        });
      });
    },
    onLoad() {
      let day = new Date();
      this.limit += 10;
      this.axios({
        method: "get",
        url: "index/moreCinemas",
        params: {
          day: day.getFullYear() + "-" + day.getMonth() + "-" + day.getDay(),
          offset: this.offset,
          limit: this.limit,
          brandId: this.id,
          cityId: this.CityId
        }
      }).then(ref => {
        if (this.CinemasList == ref.data) {
          this.loading = true;
          this.finished = true;
        }
        this.CinemasList = ref.data;
        this.loading = false;
      });
    },
    GetMoreCinemas(Id = "-1") {
      let day = new Date();
      this.axios({
        method: "get",
        url: "index/moreCinemas",
        params: {
          day: day.getFullYear() + "-" + day.getMonth() + "-" + day.getDay(),
          offset: this.offset,
          limit: this.limit,
          brandId: Id,
          cityId: this.CityId
        }
      }).then(ref => {
        this.CinemasList = ref.data;
      });
    },
    GetMoreCinemasBydistrictId(districtId) {
      let day = new Date();
      this.axios({
        method: "get",
        url: "index/moreCinemas",
        params: {
          day: day.getFullYear() + "-" + day.getMonth() + "-" + day.getDay(),
          offset: this.offset,
          limit: this.limit,
          districtId: districtId,
          cityId: this.CityId
        }
      }).then(ref => {
        this.CinemasList = ref.data;
      });
    },
    GoCinemas(cinemaId) {
      this.$router.push({ name: "Cinemas", params: { cinemaId } });
    },
    onDistrict() {
      this.GetCinemas();
    },
    onNavClick(index) {
      this.subItems = this.district[index].subItems;
    },
    onItemClick(index, districtId) {
      this.$refs.item.toggle(false);
      this.ItemIndex = index;
      this.GetMoreCinemasBydistrictId(districtId);
    }
  }
};
</script>
<style lang="less" scoped>
.subItems {
  background: rgb(245, 245, 245);
  .itemActive {
    color: #e4393c;
  }
  .item {
    position: relative;
    height: 0.9rem;
    line-height: 0.9rem;
    padding: 0 0 0 0.5rem;
    .item-name {
      width: 80%;
      font-size: 0.28rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .item-count {
      float: right;
      width: 0.4rem;
      margin-right: 0.2rem;
      font-size: 0.24rem;
      text-align: right;
    }
  }
}
.active {
  color: red;
}
.brand {
  position: relative;
  line-height: 0.88rem;
  height: 0.88rem;
  padding: 0 0.3rem 0 0.52rem;
  border-bottom: 0.02rem solid #e5e5e5;
  .name {
    position: absolute;
    left: 30px;
    font-size: 12px;
  }
  .count {
    position: absolute;
    right: 20px;
    color: #8f9296;
    font-size: 0.24rem;
  }
}
.cinema-item {
  background-color: #fff;
  border-bottom: 1px solid beige;
  padding: 10px 10px;
  line-height: 22px;
  .title {
    height: 0.46rem;
    line-height: 0.46rem;
    font-size: 14px;
    color: #000;
  }
  .price {
    margin-left: 20px;
    color: #e4393c;
    .n {
      font-size: 16px;
      margin-right: 2px;
    }
  }
  .location {
    color: #8f9296;
  }
  .services {
    display: flex;
    flex-wrap: wrap;
    .endorse {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(88, 157, 175);
      border: 1px solid rgb(88, 157, 175);
      margin-right: 6px;
    }
    .snack {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(255, 153, 0);
      border: 1px solid rgb(255, 153, 0);
      margin-right: 6px;
    }
    .vipTag {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(255, 153, 0);
      border: 1px solid rgb(255, 153, 0);
      margin-right: 6px;
    }
    .hallType {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(88, 157, 175);
      border: 1px solid rgb(88, 157, 175);
      margin-right: 6px;
    }
    .allowRefund {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(88, 157, 175);
      border: 1px solid rgb(88, 157, 175);
      margin-right: 6px;
    }
  }
}
</style>